<template>
  <div style="width: 100%;padding-top: 20px;">
    <!---->
    <el-form ref="userInfo2" :rules="userInfoFules" :model="userInfo2" status-icon label-position="left"
             label-width="150px" style="width: 50%;">
      <el-form-item label="姓名" prop="realName">
        <el-input v-model="userInfo2.realName" placeholder="请输入真实姓名"/>
      </el-form-item>
      <el-form-item label="银行账号" prop="account">
        <el-input v-model="userInfo2.account" placeholder="请输入银行账户号"/>
      </el-form-item>
      <el-form-item label="开户银行" prop="bankCode">
        <el-input v-model="userInfo2.bankCode" readonly="readonly" placeholder="请输入开户银行" @click.native="getUnioLs()"/>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="userInfo2.mobile" placeholder="请输入手机号"/>
      </el-form-item>
      <el-form-item label="短信验证码" prop="checkSms">
        <el-input v-model="userInfo2.checkSms" placeholder="请输入短信验证码" style="width:64%;"/>
        <el-button :loading="phoneloading" type="primary" :disabled="phoneDisabled" style="width: 114px;"
                   @click.stop="checkSmsesend">{{ phoneText }}
        </el-button>
      </el-form-item>
      <el-form-item style="margin-top:60px;">
        <!--<el-button @click="cancel">取消</el-button>-->
        <el-button type="primary" @click="realcheck">确定</el-button>
      </el-form-item>
    </el-form>

    <!-- 联行号对话框 -->
    <el-dialog :visible.sync="UnionDialogVisible" title="选择开户银行" :close-on-click-modal="false">
      <el-form :rules="editFormRules" :model="listQuery1" status-icon label-position="left" class="demo-form-inline"
               label-width="100px" style="width: 100%; margin-left:50px;display: flex">
        <el-form-item label="开户银行支行" prop="interBankName">
          <el-input auto-complete="off" v-model="listQuery1.bankName" placeholder="开户银行名称" style="width:300px" />
        </el-form-item>
        <el-form-item>
          <el-button class="filter-item" type="primary" @click="queryUnio">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="unionnosLoading" :data="unionnos" element-loading-text="正在查询中。。。" border fit highlight-current-row
                :header-cell-style="{background:'#92D3FF',color:'#fff'}">
        <el-table-column align="left" min-width="100" label="开户银行网点" prop="bankName"/>
        <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="primary" size="mini"
                       @click="choose(scope.row)">选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total1>0" :total="total1" :page.sync="listQuery1.pageNum" :limit.sync="listQuery1.pageSize"
                  @pagination="getUnioLs"/>
    </el-dialog>
  </div>
</template>

<script>
import {doGet, doPost} from '@/api'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'realcheck',
  filters: { },
  components: {
    Pagination
  },
  data() {
    const validateCheckSms = (rule, value, callback) => {
      if (value.length != 6) {
        callback(new Error('短信验证码必须为6位'))
      } else {
        callback()
      }
    }
    const mobileValidate = (rule, value, callback) => {
      let reg = /^[1][0-9]{10}$/;
      if (!reg.test(value)) {
        callback(new Error('手机号格式不正确'));
      } else {
        callback()
      }
    }
    return {
      list: [],
      unionnos: [],
      total1: 0,
      userInfo2: {
        realName: '',
        account: '',
        bankCode: '',
        checkSms: '',
        mobile: ''
      },
      userInfoFules: {
        realName: [{ required: true, message: '真实姓名不能为空', trigger: 'blur' }],
        account: [{ required: true, message: '银行账户号不能为空', trigger: 'blur' }],
        bankCode: [{ required: true, message: '账户银行标准编码不能为空', trigger: 'blur' }],
        checkSms: [
          { required: true, message: '短信验证码不能为空', trigger: 'blur' },
          { validator: validateCheckSms, trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { validator: mobileValidate, trigger: 'blur' }
        ]
      },
      phoneDisabled: true,
      unionnosLoading: true,
      phoneText: '获取验证码',
      phoneloading: false,
      UnionDialogVisible: undefined,
      editFormRules: {
      },
      listQuery1: {
        pageNum: 1,
        pageSize: 10,
        bankName: undefined
      },
    }
  },
  watch: {
    userInfo2: {
      handler: function(val) {
        let reg = /^[1][0-9]{10}$/;
        if (!reg.test(val.mobile)) {
          this.phoneDisabled = true
        } else {
          if (!this.timer) {
            this.phoneDisabled = false
          }
        }
      },
      deep: true
    }
  },
  created() {
    doGet('personal.html?op=info',).then((response) => {
      this.userInfo2.mobile = response.data.mobile
    }).catch((error) => {
    })
  },
  methods: {
    checkSmsesend() {
      this.phoneloading = true
      doGet('sendsms.html',{ phone: this.userInfo2.mobile }).then((response) => {
        this.phoneDisabled = true
        this.phoneloading = false
        this.setTime(300)
      }).catch((error) => {
        this.$notify.error({
          title: '失败',
          message: error.message
        })
        this.phoneloading = false
      })
    },

    setTime(time) {
      if (time <= 0) {
        this.phoneText = '重新获取'
        this.phoneDisabled = false
        clearTimeout(this.timer)
        return
      }
      this.phoneText = `还剩${time}s`
      this.timer = setTimeout(() => {
        time--
        this.setTime(time)
      }, 1000)
    },
    realcheck() {
      this.$refs.userInfo2.validate((valid) => {
        if (valid && !this.loading) {
          this.loading = true
          doGet('userinfo.html?op=realcheck', this.userInfo2) .then(response => {
            this.loading = false
            this.$router.back()
            this.$notify.success({
              title: '成功',
              message: '您已实名认证'
            })
          }).catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.message
            })
            this.loading = false
          })
        }
      })
    },
    /*分行弹窗显示*/
    getUnioLs() {
      this.UnionDialogVisible = true
      this.unionnosLoading = true
      // this.listQuery1.bankName = ''
      doGet('unionno.html?op=list', this.listQuery1).then(response => {
        this.unionnos = response.rows
        this.total1 = response.data.totalcount
        this.unionnosLoading = false
      }).catch(() => {
        this.unionnos = []
        this.total1 = 0
        this.unionnosLoading = false
      })
    },
    /*分行查找*/
    queryUnio() {
      this.UnionDialogVisible = true
      this.pageNum = this.pageNum
      this.pageSize = this.pageSize
      this.getUnioLs()
    },
    /*选择分行*/
    choose(row) {
      this.userInfo2.interBankNo = row.interBankNo
      this.userInfo2.bankCode = row.bankName
      // this.listQuery1.bankName = row.bankName
      this.UnionDialogVisible = false
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
